@import 'mo/style/common';

$badge-size: 11px;

#{$problems} {
    margin: 0 18px;

    &__treeview {
        &__treeNode {
            align-items: center;
            display: flex;

            &__badge {
                background: var(--badge-background);
                border-radius: $badge-size;
                box-sizing: border-box;
                color: var(--badge-foreground);
                display: inline-block;
                font-size: $badge-size;
                font-weight: 400;
                line-height: $badge-size;
                margin-left: 10px;
                min-height: 18px;
                min-width: 18px;
                padding: 3px 6px;
                text-align: center;
            }
        }

        #{$tree}__treenode:not(#{$tree}__treenode--active) {
            .codicon-info {
                color: var(--problemsInfoIcon-foreground);
            }

            .codicon-warning {
                color: var(--problemsWarningIcon-foreground);
            }

            .codicon-error {
                color: var(--problemsErrorIcon-foreground);
            }
        }

        &__treeLeaf {
            align-items: center;
            display: flex;

            .codicon {
                margin-right: 6px;
            }

            &__subInfo {
                margin-left: 6px;
                opacity: 0.7;
            }
        }
    }
}
